<template>
    <el-dialog title="新增证书" :visible="true" width="600px" center :lock-scroll="true" :close-on-press-escape="false"
        :close-on-click-modal="false" top="40px" @close="cancel">
        <el-form label-width="100px">

            <el-form-item label="选择会员" required>
                <template v-if="formData.user">
                    <el-button type="text" size="small">{{ formData.user.name }} {{ formData.user.account}}</el-button>
                    <el-button type="danger" size="small" @click="handleDeleteUser">删除</el-button>
                </template>

                <template v-else>
                    <el-button type="primary" size="small" @click="openDrawer">选择会员</el-button>
                </template>
            </el-form-item>

            <el-form-item label="证书模板" required>
                <el-select v-model="formData.certificateConfigId">
                    <el-option v-for="item in certificateList" :label="item.certificateNamePrefix" :value="item.id" :key="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

        </el-form>
        <span slot="footer">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="submitForm">保存</el-button>
        </span>

        <drawer-user title="选择会员" :visible.sync="drawerVisible" @select="handleAssociate"></drawer-user>
    </el-dialog>
</template>

<script>
import drawerUser from "@/components/drawerUser";
import { getCertificateList } from '../../utils/certificate';

export default {
    components: {
        drawerUser
    },
    props: ['visible'],
    data() {
        return {
            drawerVisible: false,
            formData: {
                user: '',
                certificateConfigId: ''
            },
            certificateList: [],

        }
    },

    mounted() {
        this.init()
    },

    methods: {

        async init() {
            this.certificateList =  await getCertificateList();
        },

        openDrawer() {
            this.drawerVisible = true;
        },

        handleDeleteUser () {
            this.$set(this.formData, 'user', '')
        },

        async submitForm() {
            const { user, certificateConfigId } = this.formData;
            const rules = [
                {
                    case: !user,
                    message: "请输入用户",
                },
                {
                    case: !certificateConfigId,
                    message: "请选择证书类型",
                }
            ]

            const valid = this.$validForm(rules)
            if (!valid) {
                return
            }

            const url = "/api/person-certificates/bindPersonalCertificate"
            const { code } = await this.$fetch.post(
                url,
                {
                    userId: user.id,
                    certificateConfigId
                }
            );
            if (code === 0) {
                this.$message.success("新增成功");
                this.cancel();
                return;
            }
        },

        handleAssociate(list) {
            if (list.length !== 1) {
                return this.$message.error("只能选择一个");
            }
            this.$set(this.formData, 'user', list[0]);
            console.log(list);
            this.drawerVisible = false;
        },

        cancel() {
            this.$emit("update:visible", false);
            this.$emit("refresh");
        },

    }
}

</script>

<style scoped>
::v-deep .preview-image {
    width: 120px;
}
</style>